<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-动态修改dom元素内容.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <h1>今天天气不错，我打算约下面的同学去旅游</h1>
    <h2>xxx</h2>

    <script>
      /* 
      1 获取 输入框输入的同学的名称
      2 把名字 显示到 h2标签中 
        1 先获取h2标签对应的dom元素
        2 使用代码修改文本内容 
          dom元素.innerText = "修改的内容 "
       */

      let userName = prompt('请输入你想邀约的同学的名称');

      let h2Dom = document.querySelector('h2');

      // h2标签中的文字 就等于 userName
      h2Dom.innerText = userName;
    </script>
  </body>
</html>
